import React from 'react';
import axios from 'axios';
import {connect} from "react-redux";
import {Cascader} from 'antd';
import {injectIntl} from 'react-intl';
import {actioncityposition} from '../../redux/position/position.redux.js';

/**
 *城市选择控件
 * @method 采用AntDesign Cascader懒加载
 * @param placeholder 在此处为初始值
 * */
@connect(state => state.position, {actioncityposition})
class pickCity extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            provinceList: [],
        }
    }

    componentWillMount() {
        this.getProvince()
    }


    getProvince = () => {
        axios.post(this.props.level1.url,{...this.props.level1.params}).then(res => {
            if (res && res.code == 200) {
                res.data.forEach((item) => {
                    item.isLeaf = false; item.level = 1
                });
                this.setState({
                    provinceList: res.data
                })
            }
        })
    };

    onChange = (value, selectedOptions) => {
        //任意城市
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(Object.assign({}, value));
        }
        ;
        this.props.actioncityposition(value)
    };

    loadData = (selectedOptions) => {
        const targetOption = selectedOptions[selectedOptions.length - 1];
        console.log('targetOption', targetOption);
        targetOption.loading = true;
        if (targetOption.level === 1) {
            axios.post(this.props.level2.url, Object.assign({province: targetOption.id},this.props.level2.params)).then(res => {
                if (res && res.code == 200) {
                    if (this.props.level3) {
                        res.data.forEach((item) => {
                            item.isLeaf = false;
                            item.level = 2
                        });
                    }
                    targetOption.loading = false;
                    targetOption.children = res.data;
                    this.setState({
                        provinceList: [...this.state.provinceList],
                    });
                }
            })
        }
        if (targetOption.level === 2 && this.props.level3) {
            axios.post(this.props.level3.url, Object.assign({city: targetOption.id},this.props.level3.params)).then(res => {
                if (res && res.code == 200) {
                    targetOption.loading = false;
                    targetOption.children = res.data;
                    this.setState({
                        provinceList: [...this.state.provinceList],
                    });
                }
            })
        }
    }

    render() {
        const common = this.props.intl.messages.common;
        if('actioncityposition' in this.props){
            delete this.props.actioncityposition
        }
        console.log(this.props);
        return (
            <div>
                <Cascader filedNames={{label: 'name', value: 'id', children: 'children'}}
                          options={this.state.provinceList}
                          loadData={this.loadData}
                          onChange={this.onChange}
                          changeOnSelect
                          placeholder={common.pleaseSelect}
                          {...this.props}
                />
            </div>
        )
    }
}

export default injectIntl(pickCity)